<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/order.css">
    <script src="../util/jquery-3.4.0.js"></script>
    <script src="../util/layui-v2.4.5/layui/layui.js"></script>
    <script src="../util/layui-v2.4.5/layui/css/layui.css"></script>
</head>
<body>
    <div class="order-navgation">
            我的订单
    </div>
    <div class="order-box">
        <div class="order-box-navgation">
            订单信息
        </div>
        <div class="order-box-hr"></div>
        <div class="order-box-body">
            <ul class="order-box-body-ul1  clearfix">
                <li class="li1">陪玩</li>
                <li class="li2">昵称</li>
                <li class="li3">游戏名</li>
                <li class="li4">单位(元/局)</li>
                <li class="li5">购买数量</li>
                <li class="li6">总价</li>
            </ul>
            <ul class="order-box-body-ul2">
            <!-- <li  class="li1">
                                <img src="../image/tr/11.jpg" alt="" width="80" height="80">
                            </li>
                            <li class="li2">妞妞</li>
                            <li class="li3">英雄联盟</li>
                            <li class="li4"> <span>￥</span> <span id="span">8.00</span> </li>
                            <li class="li5"><span class="order-box-body-ul2-left">-</span><input type="text" value="1"><span class="order-box-body-ul2-right">+</span></li>
                            <li class="li6"><span>￥</span> <span id="span1">8.00</span></li> -->
            </ul>
            <ul class="order-box-body-ul3">
                <li id="li">
                    <textarea maxlength="30" placeholder="备注说明：注意事项......"></textarea>
                    <p class="p1"><span>0</span>/30</p>
                </li>
            </ul>
            
        </div>
        <div class="order-box-foot">
                
        </div>
    </div>
    <div class="order-box1">
        <div class="order-box1-text">支付方式</div>
        <div class="order-box1-hr"></div>
        <div class="order-box1-body">
            <div class="order-box1-body-cash" data-index="0">
                <img src="../image/tr/ico_pay1.png" alt="">
                <span>余额支付</span> 
                <p>余额:<span id="span123"></span></p>
            </div>
            <div class="order-box1-body-wx">
                <img src="../image/tr/ico_pay3.png" alt="">
                <span>微信支付</span>
            </div>
            <div class="order-box1-body-zfb">
                <img src="../image/tr/ico_pay2.png" alt="">
                <span>支付宝支付</span>
            </div>
        </div>
    </div>
    <div class="order-foot">
        <div class="order-foot-pay">
            <span class="order-foot-pay-span">实付金额：</span><span class="order-foot-pay-span">￥</span>
            <span class="order-foot-pay-span1"></span>
        </div>
        <div class="order-foot-btn layui-btn" data-method="confirmTrans">
            提交订单
        </div>
    </div>
</body>

<script>
    let oMoney=$('.order-foot-pay-span1');
    let oDiv=$('.order-box1-body div');
    layui.use('layer', function(){
        var $ = layui.jquery, layer = layui.layer;
        var active = {
            confirmTrans: function(){
            //配置一个透明的询问框
            layer.msg('亲~~~<br>是否提交订单', {
                time: 20000, //20s后自动关闭
                btn: ['提交','取消']
            });
          }
        }
        $('.layui-btn').on('click', function(){
        var othis = $(this), method = othis.data('method');
        active[method] ? (function(){
            active[method].call(this, othis) 
            $('.layui-layer-btn0').on('click',function(){
                $('.layui-layer-btn0').attr('data-method',"confirmTrans1")
                if($('.order-box1-body-cash p').css('display') == 'block'){
                    if(!$('#span123').text()-$('.order-foot-pay-span1').text()<0){
                        var active1 = {
                            confirmTrans1: function(){
                            //配置一个透明的询问框
                            layer.msg('亲~~~<br>您余额不足<br>是否前往充值页面', {
                                time: 20000, //20s后自动关闭
                                btn: ['是','其他方式']
                                });
                            }
                        }
                        var othis = $(this), method = othis.data('method');
                        active1[method] ?(function(){
                            active1[method].call(this, othis) 
                            //window.location.href='http://localhost:5000/page/recharge.html'
                            $('.layui-layer-btn .layui-layer-btn0').on('click',function(){
                                window.location.href='http://localhost:5000/page/recharge.html'
                            })
                        }()):'';
                    }
                }else{
                    let date=clock();
                    let money=$('.order-foot-pay-span1').text().split('.')[0];
                    $.ajax({
                        url:'/cancelorder',
                        type:'post',
                        data:{
                            id:111111,
                            id2:111112,
                            date:date,
                            stata:"进行中",
                            money:money,
                            num:$('.li5 input').val(),
                    },
                    success:function(res){
                        res.error?console.log('数据库错误'):console.log('数据传输成功')
                    }
                })
                    window.location.href='http://localhost:5000/page/Master_Order.html';
                }
            })
            $('.layui-layer-btn1').on('click',function(){
                let date=clock();
                let money=$('.order-foot-pay-span1').text();
                    $.ajax({
                        url:'/cancelorder',
                        type:'post',
                        data:{
                            id:111111,
                            id2:111112,
                            date:date,
                            stata:"待支付",
                            money:money,
                            num:$('.li5 input').val(),
                    },
                success:function(res){
                        res.error?console.log('数据库错误'):console.log('数据传输成功')
                }
            })
            })
        }()): '';
      });
    });
    
    $('textarea').on('input',function(){
        $('.order-box-body-ul3 span').text($('textarea').val().length)
    })
    function changeTwoDecimal_f(x) {
                var f_x = parseFloat(x);
                if (isNaN(f_x)) {
                    alert('function:changeTwoDecimal->parameter error');
                    return false;
                }
                var f_x = Math.round(x * 100) / 100;
                var s_x = f_x.toString();
                var pos_decimal = s_x.indexOf('.');
                if (pos_decimal < 0) {
                    pos_decimal = s_x.length;
                    s_x += '.';
                }
                while (s_x.length <= pos_decimal + 2) {
                    s_x += '0';
                }
                return s_x;
            }
    function show1(res){
        $('.order-box-foot').html(`
        <div class="order-box-foot-phone">
                    <img src="../image/tr/ico_33.png" alt="">
                    手机: <input type="text" value="${res[0].U_tel}" disabled><span></span>
                </div>
                <div class="order-box-foot-qq">
                    <img src="../image/tr/ico_31.png" alt="">
                    QQ: <input type="text" value="${res[0].U_qq}" disabled><span></span>
                </div>
                <div class="order-box-foot-wx">
                    <img src="../image/tr/ico_32.png" alt="">
                    微信: <input type="text" value="${res[0].U_wechat}" disabled><span></span>
                </div>
        `)
    }
    $(document).ready(function(){
        $.ajax({
            url:'/orderPeiWan',
            type:'get',
            data:{
                id:111116,
                kuid:111111,
                type:1,
            },
            success:function(res){
                res.error?console.log('数据库错误'):(function(){
                    $('.order-box-body-ul2').append(`
                    <li  class="li1">
                        <img src="${res[0].U_photo}" alt="" width="80" height="80">
                    </li>
                    <li class="li2">${res[0].U_falsename}</li>
                    <li class="li3">${res[0].G_names}</li>
                    <li class="li4"> <span>￥</span> <span id="span">${changeTwoDecimal_f(res[0].PU_price)}</span> </li>
                    <li class="li5"><span class="order-box-body-ul2-left">-</span><input type="text" value="1"><span class="order-box-body-ul2-right">+</span></li>
                    <li class="li6"><span>￥</span> <span id="span1">${changeTwoDecimal_f(res[0].PU_price)}</span>
                    `)
                    oMoney.text(changeTwoDecimal_f(res[0].PU_price))
                    show1(res)
                }())
            }
        })
        $.ajax({
            url:'/orderPeiWan1',
            type:'get',
            data:{
                kuid:111111,
            },
            success:function(res){
                $('.order-box1-body-cash #span123').text(changeTwoDecimal_f(res[0].p))
            }
        })
    })
        
        $('.order-box-body-ul2').on('click','.order-box-body-ul2-left',function(){
            let oInp=$('.order-box-body-ul2 input');
            let oPay=$('.order-box-body-ul2 .li6 #span1');
            let oPrice=$('.order-box-body-ul2 .li4 #span');
            
            if(oInp.val()==1){
                oInp.val(1)
            }else{
                oInp.val(oInp.val()-1);
            };
            oPay.text(parseInt(oInp.val())*parseInt(oPrice.text())+'.00');
            oMoney.text(oPay.text());
        })
        $('.order-box-body-ul2').on('click','.order-box-body-ul2-right',function(){
            let oInp=$('.order-box-body-ul2 input');
            let oPay=$('.order-box-body-ul2 .li6 #span1');
            let oPrice=$('.order-box-body-ul2 .li4 #span');
            
            oInp.val(parseInt(oInp.val())+1);
            oPay.text(parseInt(oInp.val())*parseInt(oPrice.text())+'.00');
            oMoney.text(oPay.text());
        })
       
    $('.order-box1-body').on('click','div',function(){
        
        $.each(oDiv,function(i,v){
                $(v).css({
                    'border':'1px solid #d7d7d7'
                })
                $(v).find($('span')).css({
                    'color': 'black'
                })
                $(v).find($('p')).css({
                    'display':'none'
                })
                $(v).css({
                    'border':'1px solid #d7d7d7'
                })
        })
        if($('.order-box1-body-cash').attr('data-index')==0){
            $(this).css({
                    'border':'1px solid #ff5d42'
                })
                $(this).find($('span')).css({
                    'display':'inline-block',
                    'color':'#ff5d42'
                })
                $(this).find($('p')).css({
                    'display':'inline-block'
                })
                
        }else{
            $(this).css({
                    'border':'1px solid #f5501e',
                })
                $(this).find($('span')).css({
                    'color':'#ff5d42'
                })
        }
    })
    function toDub(n) {
        return n<10?'0'+n:''+n;
    }
    function clock(){
        var oDate=new Date();

        var y=oDate.getFullYear();
        var M=oDate.getMonth()+1;
        var d=oDate.getDate();

        var h=oDate.getHours();
        var m=oDate.getMinutes();
        var s=oDate.getSeconds();

        // var week=oDate.getDay();  //0-6

        // var arr=['日','一','二','三','四','五','六'];


        var oDATA=`${y}-${toDub(M)}-${toDub(d)} ${toDub(h)}:${toDub(m)}:${toDub(s)}`;
        return oDATA;
    }
    
    // $('.order-foot-btn').click(function(){
    //     if(confirm("是否提交订单")){
    //         let date=clock();
    //         let money=$('.order-foot-pay-span1').text().split('.')[0];
    //         $.ajax({
    //             url:'/cancelorder',
    //             type:'post',
    //             data:{
    //                 id:111111,
    //                 id2:111112,
    //                 date:date,
    //                 stata:"进行中",
    //                 money:money,
    //                 num:$('.li5 input').val(),
    //             },
    //             success:function(res){
    //                 res.error?console.log('数据库错误'):console.log('数据传输成功')
    //             }
    //         })
    //     }else{
    //         let date=clock();
    //         let money=$('.order-foot-pay-span1').text();
    //         $.ajax({
    //             url:'/cancelorder',
    //             type:'post',
    //             data:{
    //                 id:111111,
    //                 id2:111112,
    //                 date:date,
    //                 stata:"待支付",
    //                 money:money,
    //                 num:$('.li5 input').val(),
    //             },
    //             success:function(res){
    //                     res.error?console.log('数据库错误'):console.log('数据传输成功')
    //             }
    //         })
    //     }
    // })
</script>
</html>